<!-- html版本声明 用的html5标准 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--    元信息，和网页呈现无关但是是网页自身的一些属性定义。-->
    <meta charset="UTF-8">
    <title>这是一个欢迎的界面</title>
    <!--    链接一些外部的资源文件-->
    <!--    链接外部资源形式引入外部css样式-->
    <link rel="stylesheet" href="../../css/positionCase.css">
    <!--    在网页内编写js脚本，也可以引入一些外部的库-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../../js/sunnyCase.js"></script>
    <!--    有些不支持script的浏览器，网页所作的处理-->
    <noscript></noscript>
    <!--    用于编写网页内的css样式-->
    <!--    导入形式引入css样式-->
    <!--    <style> @import "floatCase.css";</style>-->
    <style>
    </style>
</head>
<body onload="storageToRow()">
<header style="color:orchid;font-size: xx-large;text-indent: 2em;text-align: center">
    欢迎使用sunny自动化测试用例管理
</header>
<aside>
    <ul id="alist">
        <li><a class="big-link" target="_blank" href="http://www.testingedu.com.cn:33080">官方网站</a></li>
        <li><a class="big-link" target="_blank" href="https://testedu.ke.qq.com/">腾讯课堂</a></li>
        <li id="baidu"><a class="big-link baidu" target="_blank" href="https://www.baidu.com/">百度一下</a></li>
    </ul>
</aside>
<!--一般只写一个main元素-->

<main>
    <!--    蒙层，用于覆盖底部页面-->
    <div class="main-bg"></div>
    <div class="input-wrapper">
        <h3>添加测试用例</h3>
        <button class="close-button" onclick="closeAddCase()">关闭
        </button>
        <form id="caseForm">
            <label>用例名：<input type="text" name="caseName" placeholder="输入用例名"></label>
            <label>步骤名：<input type="text" name="stepName" placeholder="输入步骤名"></label>
            <!--        单选框， 需要name是一致的，才能产生互斥-->
            <div>
                用例类型：
                <!--            label元素可以让其中的文本也具备input元素的选择功能，可以使用for属性来进行标记-->
                <label><input type="radio" name="caseType" value="web"> web自动化</label>
                <label><input type="radio" name="caseType" value="api"> 接口自动化</label>
            </div>
            <label for="keywords">关键字：</label>
            <select name="keywords" id="keywords">
                <option value="openBrowser">打开浏览器</option>
                <option value="visitWeb">访问网页</option>
                <option value="click">点击元素</option>
                <option value="input">输入内容</option>
            </select>
            <br>
            <label>参数1：<input type="text" name="param1"></label>
            <label>参数2：<input type="text" name="param2"></label>
            <button id="addSubmit" type="button"
            >提交新增
            </button>
        </form>
    </div>


    <div class="table-wrapper">
        <h3 id="case-table-title">测试用例显示</h3>
        <button class="add-case-button" onclick="showAddCase()">新增用例
        </button>
        <!--    表格-->
        <table id="caseTable" border="2" bgcolor="#add8e6" align="center" width="500px">
            <col style="width:200px;overflow: hidden; text-overflow: ellipsis">
            <col style="width:200px">
            <thead>
            <tr>
                <th class="case-name" style="color:yellowgreen">用例名</th>
                <th class="case-name" id="step-name">步骤名</th>
                <th>关键字</th>
                <th>参数1</th>
                <th>参数2</th>
            </tr>
            </thead>
            <tbody>
            <!--        ${}是要传递给templates模板的变量名-->
            <tr th:each="sunnyCase:${sunnyCases}">
                <!--            替换td中的内容为th:text后的值-->
                <td th:text="${sunnyCase.caseName}">请求auth</td>
                <td th:text="${sunnyCase.stepName}">发送post</td>
                <!--                <th>第一个a</th>-->
                <!--                <th>第二个a</th>-->
                <td th:text="${sunnyCase.keywords}">post</td>
                <td th:text="${sunnyCase.param1}">auth</td>
                <td th:text="${sunnyCase.param2}">token</td>
                <td>
                    <button id="delete">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <button onclick="window.scrollTo(0,0)" class="top-button">↑</button>
</main>
<script>document.getElementById("delete")
    .addEventListener("click", deleteCase);
document.getElementById("addSubmit").addEventListener("click", addCase)
</script>
</body>

</html>